<template>
  <div
    :style="{height: height === 'auto' ? '126px' : height + 'px'}"
    style="position:relative; border-bottom:2px solid rgb(255,255,255,0.3);"
  >
    <div style="height:52px;border-left:2px solid #00704E;color:#fff">
      <div style="padding-left:8px;height:40%;font-size:14px">{{defaultConfig.numberName}}</div>
      <div style="padding-left:11px;height:60%;">
        <img src="../../static/image/images/3.png">
        <img
          src="../../static/image/images/12.png"
          style="position:absolute;left:80px;z-index:99;top:20px;animation:turn 3s linear infinite;display:flex;"
        >
      </div>
    </div>
    <div
      style="height:98px;width:98px;position:absolute;left:78px;top:20px;"
      ref="myChart"
    ></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      height: 126,
      defaultConfig: {
        numberName: "张北输送电量",
      },
      data: {
        number: 1185, // 数据
        rate: [75], // 外层圈的进度
        unit: "MW",
      },
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      var myChart = echarts.init(this.$refs.myChart);
      var num = this.data.number; //数值
      var unit = this.data.unit; //单位
      let angle = 0; //角度，用来做简单的动画效果的
      var option = {
        title: [
          {
            text: num,
            textStyle: {
              color: "#fff",
              fontSize: 24,
              fontWeight: "lighter",
              fontFamily: "DINPro",
            },
            itemGap: 20,
            left: "center",
            top: "28%",
          },
          {
            text: unit,
            left: "center",
            top: "58%",
            textStyle: {
              color: "#02FFB4",
              fontSize: 10,
            },
            padding: 4,
            borderColor: "#02FFB4",
            borderWidth: 1,
            borderRadius: 0,
          },
        ],
        series: [
          {
            //前景条
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            z: 3,
            data: [0],
          },
          {
            //背景条
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            z: 2,
            data: [0],
          },
          {
            // 小圆点
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            data: [10],
          },
          {
            // 中心渐变圆区域
            type: "pie",
            radius: ["0", "90%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            z: 1,
            data: [
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0.2,
                        color: "rgba(2, 255, 180, 0)",
                      },
                      {
                        offset: 1,
                        color: "rgba(2, 255, 180, 0.4)",
                      },
                    ]),
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>